<template>
  <a-modal v-model:open="open" :title="title" :width="1200" :footer="null" :mask-closable="false">
    <a-table
      size="small"
      :loading="loading"
      :pagination="pagination"
      :columns="columns"
      :data-source="dataSource"
      @change="paginationChange"
      :scroll="{ y: 500 }"
    >
      <template #bodyCell="{ column, record, index }">
        <template v-if="column.key === 'isRead'">
          <a-tag v-if="record.isRead" color="green"> 已完成 </a-tag>
          <a-tag
            v-if="!record.isRead"
            color="#F1FFFA"
            style="color: #0cb67c; border-color: #0cb67c"
          >
            未完成
          </a-tag>
        </template>
        <template v-if="column.dataIndex == 'itemContent'">
          <a-popover
            title="推送内容"
            trigger="click"
            placement="leftTop"
            :overlayStyle="{ width: '500px' }"
            :get-popup-container="(triggerNode) => triggerNode"
          >
            <template #content>
              <div style="max-height: 300px; padding: 0 10px; overflow: hidden auto">
                <pre style=" word-wrap: break-word;white-space: pre-wrap">{{
                  record.itemContent
                }}</pre>
              </div>
            </template>
            <div
              style="
                display: -webkit-box;
                overflow: hidden;
                text-overflow: ellipsis;
                cursor: pointer;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
              "
            >
              {{ record.itemContent }}
            </div>
          </a-popover>
        </template>
        <template v-if="column.key === 'action'">
          <a-button type="link" v-if="record.isSeeBtn" @click="goDetail(record)">查看详情</a-button>
        </template>
      </template>
    </a-table>
  </a-modal>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { getManagePathExecution } from '@/api/healthManaWorkbench'
import dayjs from 'dayjs'
import { tableRowSpan } from '@/utils/tools'
import { useRouter } from 'vue-router'

const emit = defineEmits(['goPage'])
const router = useRouter()
const open = ref(false)
const title = ref('')
const loading = ref(true)

const detailInfoData = ref()

const pagination = ref<any>({
  current: 1,
  total: 0,
  pageSize: 10,
  showSizeChanger: true,
  pageSizeOptions: ['10', '20', '50', '100'],
  showQuickJumper: true
})
const paginationChange = (page: any) => {
  pagination.value = { ...page }
  loading.value = true
  getDataList()
}

const columns = ref([
  {
    title: '推送日期',
    dataIndex: 'pushDate',
    key: 'pushDate',
    align: 'left',
    customCell: (record, index, column) => {
      return tableRowSpan(record, index, column, dataSource.value)
    }
  },
  {
    title: '推送时间',
    dataIndex: 'pushTime',
    key: 'pushTime',
    align: 'left'
  },
  {
    title: '路径类型',
    dataIndex: 'templateType',
    key: 'templateType',
    align: 'left'
  },
  {
    title: '推送内容',
    dataIndex: 'itemContent',
    key: 'itemContent',
    align: 'left',
    width: 300
  },
  {
    title: '患者执行情况',
    dataIndex: 'isRead',
    key: 'isRead',
    align: 'left'
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    align: 'left'
  }
])
const dataSource = ref([])

const init = (data) => {
  pagination.value.current = 1
  loading.value = false
  open.value = true
  title.value = `健康管理方案推送计划`
  detailInfoData.value = data

  getDataList()
}

const getDataList = () => {
  console.log(window.location)
  getManagePathExecution({
    page: pagination.value.current,
    limit: pagination.value.pageSize,
    empi: detailInfoData.value.empi,
    userId: detailInfoData.value.userId
  })
    .then((res) => {
      loading.value = false
      res.data.list.forEach((item) => {
        item.pushDate = dayjs(item.planTime).format('YYYY-MM-DD')
        item.pushTime = dayjs(item.planTime).format('HH:mm')

        item.isSeeBtn = false
        item.seeUrl = {
          path: '/examinatePatients/index',
          query: {
            type: '',
            id: detailInfoData.value.userId,
            empi: detailInfoData.value.empi,
            back: window.location.hash == '#/healthManaWorkbench/dispatch/index' ? 3 : 4
          }
        }
        switch (item.templateType) {
          case '健康处方':
            break
          case '健康宣教':
            item.itemContent = item.itemContent ? JSON.parse(item.itemContent).title : ''
            break
          case '健康随访':
            item.isSeeBtn = true
            item.seeUrl.query.type = '5'
            item.itemContent = item.itemName
            break
          case '健康监测':
            item.isSeeBtn = true
            item.seeUrl.query.type = '2'
            item.itemContent = item.itemContent ? JSON.parse(item.itemContent).content : ''
            break
          case '用药提醒':
            break
          case '就诊提醒':
            break
          default:
            break
        }
      })
      dataSource.value = res.data.list
      pagination.value.total = res.data.total
    })
    .catch(() => {
      loading.value = false
    })
}

// 跳转
const goDetail = (data) => {
  emit('goPage', data.seeUrl.query)
}

defineExpose({
  init
})
</script>
<style lang="less" scoped></style>
